var $ = {
    one: function (slt) {
        return document.querySelector(slt);
    },
    all: function (slt) {
        return document.querySelectorAll(slt);
    }
};
var Lunbotu = /** @class */ (function () {
    function Lunbotu(config) {
        this.sn = 0; //当前图片索引号
        this.timer = 0; //定时器
        // 轮播图大盒子
        this.box = $.one(config.boxSlt);
        this.width = this.box.offsetWidth;
        // this.box.style.height = this.width/2+"px";//重置高度
        // console.log(this.box.offsetWidth);
        this.offsetTime = config.offsetTime;
        // 图片小盒子
        this.inbox = this.box.firstElementChild;
        // this.inbox.append(this.inbox.firstElementChild.cloneNode(true));
        // 所有轮播图片
        this.imgs = this.box.querySelectorAll('.imgBox img');
        // console.log(this.imgs);
        this.max = this.imgs.length;
        // 控制小方格
        this.operateLis = this.setOperateBtns().querySelectorAll("li");
        this.operateLiOld = this.operateLis[0];
        this.operateLiOld.className = "active";
        // 其它初始化设置
        this.init();
        this.autorun();
    }
    Lunbotu.prototype.next = function () {
        this.sn++;
        if (this.sn >= this.max)
            this.sn = 0;
    };
    Lunbotu.prototype.before = function () {
        this.sn--;
        if (this.sn < 0)
            this.sn = this.max - 1;
    };
    // 显示图片
    Lunbotu.prototype.show = function () {
        // console.log(this.sn, this.max-1);
        this.inbox.style.transition = 'transform .3s';
        this.inbox.style.transform = "translateX(" + -this.sn * this.width + "px" + ")";
        // console.log(this.sn);
        this.operateLiOld.className = "";
        this.operateLis[this.sn].className = "active";
        this.operateLiOld = this.operateLis[this.sn];
    };
    // 前/后点击按钮
    Lunbotu.prototype.clickBtnNextBefore = function () {
        var _this = this;
        var btns = document.createElement("div");
        btns.className = "btnsBox";
        this.box.append(btns);
        // 创建前/后点击按钮
        btns.innerHTML = "\n      <div class=\"beforeBtn\">&lt;</div>\n      <div class=\"nextBtn\">&gt;</div>\n    ";
        btns.onclick = function (event) {
            var btn = event.target;
            if (btn.nodeName != "DIV")
                return;
            //停止自动播放
            clearInterval(_this.timer);
            // 上/下一张
            btn.className == "nextBtn" ? _this.next() : _this.before();
            _this.show();
            // 重新开启自动播放
            _this.autorun();
        };
    };
    Lunbotu.prototype.init = function () {
        var _this = this;
        // 图片父标签拉开，使图片在一行显示
        this.inbox.style.width = this.width * this.max + 100 + "px";
        // 所有图片宽度适应父标签
        this.imgs.forEach(function (img) {
            img.style.width = _this.width + "px";
        });
        //生成上/下控制按钮和事件
        this.clickBtnNextBefore();
    };
    // 设置控制小圆点
    Lunbotu.prototype.setOperateBtns = function () {
        var _this = this;
        // 生成控制小方格
        var operateBtnsHtml = "";
        for (var n = 0; n < this.max; n++) {
            operateBtnsHtml += "<li data-sn=\"" + n + "\"></li>";
        }
        var operateBtns = document.createElement("ul");
        this.box.append(operateBtns);
        operateBtns.className = "operateBtns";
        operateBtns.innerHTML = operateBtnsHtml;
        // 绑定事件
        operateBtns.onmouseover = function (event) {
            var li = event.target;
            if (li.nodeName != 'LI')
                return;
            clearInterval(_this.timer);
            _this.sn = Number(li.dataset.sn);
            _this.show();
        };
        operateBtns.onmouseout = function (event) {
            var li = event.target;
            if (li.nodeName != 'LI')
                return;
            _this.autorun();
        };
        return operateBtns;
    };
    // 自动播放
    Lunbotu.prototype.autorun = function () {
        var _this = this;
        this.timer = setInterval(function () {
            _this.next();
            _this.show();
        }, this.offsetTime);
    };
    return Lunbotu;
}());
// let lbt = new Lunbotu({boxSlt:"#lbt1", offsetTime:2000});
// lbt.init();
// lbt.clickNext('.next','.before');
// lbt.autorun();
